<template>
  <div>

    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" hidden-breadcrumb style="padding:0 32px;">
        <div slot="title" class="ivu-mt">
          <Button :to="{path:'/admin/article/sort_relation'}" icon="ios-arrow-back" size="small" class="mr20">返回</Button>
          <span v-text="$route.meta.title" class="mr20"></span>
        </div>
      </PageHeader>
    </div>

    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="formValidate" :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
        <Row type="flex">
          <Col v-bind="grid">
          <Button type="primary" icon="md-add" @click="onCreateSortCategory">添加文章分类</Button>
          </Col>
        </Row>
      </Form>
      <Divider dashed />

      <Table ref="table" :columns="columns" :data="List" :loading="loading" highlight-row no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
        <template slot-scope="{ row }" slot="action">
          <a @click="onEditSortCategory(row.id)">编辑</a>
          <Divider type="vertical" />
          <a @click="onDelete(row.id)">删除</a>
        </template>
      </Table>

      <div class="acea-row row-right page">
        <Page :total="total" :current="searchForm.page" :page-size="searchForm.limit" @on-change="onPageChange" />
      </div>
    </Card>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getList, create, edit } from '@/api/content/sortCategory'

export default {
  name: 'content_article_SortCategory',
  data () {
    return {
      searchForm: {
        page: 1,
        limit: 10,
      },

      columns: [
        {
          title: '序号',
          type: 'index',
          maxWidth: 260
        },
        {
          title: '分类名称',
          key: 'title',
          minWidth: 120
        },
        {
          title: '分类排序',
          key: 'sort',
          minWidth: 120
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          minWidth: 150
        }
      ],
      List: [],
      loading: false,
      total: 0,

      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24
      },

    }
  },
  computed: {
    ...mapState('admin/layout', [
      'isMobile'
    ]),
    labelWidth () {
      return this.isMobile ? undefined : 75;
    },
    labelPosition () {
      return this.isMobile ? 'top' : 'right';
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // ######################################################################################################################
    // # 文章分类管理 显示资源列表 操作方法
    // ######################################################################################################################

    // 显示资源列表
    getList () {
      this.loading = true
      getList(this.searchForm).then(async res => {
        if (res.status === 200) {
          this.List = res.data.list
          this.total = res.data.count
        } else {
          this.$Notice.error({ title: res.msg })
        }
        this.loading = false
      }).catch(res => {
        this.loading = false
        this.$Notice.error({ title: res.msg })
      })
    },

    // 删除指定资源
    onDelete (id) {
      let delfromData = {
        title: '删除文章分类',
        url: `content/sort/${id}`,
        method: 'DELETE',
      }
      this.$modalSure(delfromData).then((res) => {
        this.$Message.success('删除成功');
        this.getList();
      }).catch(res => {
        this.$Message.error(res.msg);
      })
    },

    // 添加人才分类弹窗
    onCreateSortCategory () {
      this.$modalForm(create()).then(() => this.getList());
    },

    // 编辑人才分类弹窗
    onEditSortCategory (id) {
      this.$modalForm(edit(id)).then(() => this.getList());
    },

    // ######################################################################################################################
    // # 其他 vue 操作方法
    // ######################################################################################################################

    // 分页
    onPageChange (index) {
      this.searchForm.page = index
      this.getList()
    },

  }
}
</script>

<style scoped>
</style>
